<template>
  <div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="float: left; margin: 20px 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-search"></i>条件查询</div>
      </div></el-col>
    </el-row>
    <el-container>
      <el-header style="text-align: left">
        <div class="module" style="text-align: left; margin: 0 10%">
          <div class="check">
            <el-form :inline="true" :model="queryForm" style="text-align: left">
              <el-form-item label="出发地">
                <el-input v-model="queryForm.departure" placeholder="出发地" clearable></el-input>
              </el-form-item>
              <el-form-item label="目的地">
                <el-input v-model="queryForm.destination" placeholder="目的地" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="info" @click="getList" plain>查询</el-button>
                <el-button type="info" @click="queryFormReset()" plain>重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-header>
      <el-main v-loading="loading" element-loading-text="正在计算中" element-loading-background="rgba(0, 0, 0, 0.8)">
        <baidu-map
          class="map-wrap"
          :center="mapData.center"
          :zoom="mapData.zoom"
          @ready="mapHandler">
        </baidu-map>

      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "DijkstraShortPath",
  data() {
    return{
      queryForm: {
        departure:'',
        destination:''
      },
      shortPathCity:[],
      transCities:[],
      specialCities:[],
      loading:false,
      //地图数据
      mapData: {
        //中心坐标
        center: { lng: 108, lat: 35 },
        //缩放级别
        zoom: 5,
      },
      map: '',
      BMap: '',
      imgEndSrc:require('@/assets/images/alert.png'),
    }
  },
  methods: {

    getList() {
      this.loading = true;
      this.$axios({
        url: 'intelligent/dijkstra/shortPath',
        method: 'post',
        data: this.queryForm
      }).then(res => {
        if (res.data.success) {
          this.cities = res.data.object;
          this.shortPathCity = this.cities.shortPathCityList;
          this.transCities = this.cities.transCityList;
          this.specialCities = this.cities.specialCityList;
          this.mapHandlerTrack();
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    queryFormReset(){
      this.queryForm.departure = null;
      this.queryForm.destination = null;
    },
    mapHandler({ BMap, map }){
      this.BMap = BMap
      this.map = map
    },

    mapHandlerTrack() {
      let map = this.map
      let BMap = this.BMap
      map.enableScrollWheelZoom();
      map.clearOverlays();

      let shortPathCity = this.shortPathCity;
      let p1 = new BMap.Point(shortPathCity[0].longitude,shortPathCity[0].latitude);
      // console.info(shortPathCity)
      let orderRoute = []
      for(let i = 1; i<shortPathCity.length-1; i++){
        let p = new BMap.Point(shortPathCity[i].longitude,shortPathCity[i].latitude);
        orderRoute.push(p)
      }
      let p2 = new BMap.Point(shortPathCity[shortPathCity.length-1].longitude,shortPathCity[shortPathCity.length-1].latitude);
      let driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: false, marker: false}});
      driving.search(p1, p2, { waypoints: orderRoute })//waypoints表示途经点
      let myGeo = new BMap.Geocoder();
      // 创建图标
      let myIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(20, 25),
        {
          offset: new BMap.Size(10, 25), // 指定定位位置
          imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
        });
      // 车辆当前位置mark在地图上
      myGeo.getPoint(shortPathCity[0].mergerName, function(point){
        let marker = new BMap.Marker(point, {icon: myIcon})
        map.addOverlay(marker)
      }, shortPathCity[0].mergerName)

      //添加中转站城市
      let transCities = this.transCities
      for(const orderForm of transCities){
        let cityIcon = myIcon;
        myGeo.getPoint(orderForm.cityName, function(point){
          let midMarker = new BMap.Marker(point, {icon: cityIcon})
          map.addOverlay(midMarker)
      }, orderForm.cityName)}

      // 添加疫情城市
      let specialCities = this.specialCities
      let midOpt = {
        width: 300, // 信息窗口宽度
        height: 0, // 信息窗口高度
      }
      for(const orderForm of specialCities){
        myGeo.getPoint(orderForm.city, function(point){
          let midMarker = new BMap.Marker(point)
          map.addOverlay(midMarker)
          midMarker.addEventListener("click",function (){
            let infoWindow
            infoWindow = new BMap.InfoWindow(
              `<div class="mapgrayInfo" >` +
              `<div class="content"><h3>疫情情况：</h3>` +
              `<h4>今日疫情新增人数：<span>` + orderForm.local_confirm_add + `</span></h4>` +
              `</div></div>`, midOpt)
            map.openInfoWindow(infoWindow, point) // 开启信息窗口
          })
        }, orderForm.city)}
      this.loading = false;
    },
  },
  created() {

  },
}
</script>

<style scoped>
.el-loading-mask{
  background-color: rgba(0,0,0,0.2);
}
.el-loading-spinner .path{
  stroke: #FFFFFF;
}
.el-loading-spinner .el-loading-text {
  color: #FFFFFF;
}
html,
body {
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
}
.el-main{
  width:90%;
  height: 50%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
.map-wrap {
  width: 100%;
  height: 75%;
  margin: 0;
}
</style>
